<template>
	<view class="login-page">
		<image class="bc" src="../../static/image/bc.png" mode=""></image>
		<view class="login">
			<u--form labelPosition="left" :model="loginParams" ref="uForm" labelWidth='110' labelAlign='right'>
				<u-form-item label="手机号：" borderBottom ref="item1">
					<u--input name="手机号" required placeholder="手机号" v-model="loginParams.phone" />
				</u-form-item>
				<u-form-item label="密码：" borderBottom ref="item4">
					<u--input name="密码" password required placeholder="密码" v-model="loginParams.password" />
				</u-form-item>
			</u--form>
		</view>

		<view class="login-btn">
			<u-button @click="login" shape="circle" type="primary">登录</u-button>
		</view>
	</view>
</template>

<script>
	import {
		loginUser,
		modifyAccount
	} from '../../common/http/api.js'
	export default {
		data() {
			return {
				loginParams: {
					phone: '',
					password: ""
				}
			};
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$store.state.cinemaName
			})
		},
		methods: {
			changePhone(e) {
				this.loginParams.phone = e.detail
			},
			changePassword(e) {
				this.loginParams.password = e.detail
			},
			login() {
				loginUser(this.loginParams).then(res => {
					if (res.code === "000") {

						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1500
						})
						setTimeout(() => {
							uni.navigateTo({
								url: "../distributor/distributor?phone=" + this.loginParams.phone
							})
						}, 1500);
					} else if (res.code === "001") {
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1500
						})
					} else {
						uni.showToast({
							title: '登录失败',
							icon: "none",
							duration: 1500
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.login-page {
		.bc {
			position: absolute;
			width: 100vw;
			height: 100vh;
			z-index: -1;
			top: 0;
		}

		.login {
			width: 80vw;
			margin: 400rpx auto 0 auto;
			border-radius: 10rpx;
			padding: 0 20rpx;
			overflow: hidden;
			background-color: #fff;
			margin-bottom: 30rpx;
		}

		.login-btn {
			margin: 80rpx 4vw;
			width: 92vw;
			border: none;
		}
	}
</style>